<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上下左右居中</title>
		<style>
			#d1{
				width:500px;
				height:400px;
				position: relative;
				background:#269ABC;
			}
			#d11{
				width:200px;
				height:100px;
				background:#E4B9B9;
				position: absolute; /*css益处法*/
				top:0;
				left:0;
				bottom:0;
				right:0;
				margin:auto;
			}
			#d2{
				width:500px;
				height:400px;
				background:#269ABC;
			}
			#d21{
				width:200px;
				height:100px;
				background:#E4B9B9;
				position: relative; 
				top:50%;
				-moz-transform: translateY(-50%); /*向上平移 自身的50%*/
				-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
	            -o-transform: translateY(-50%);
	            transform: translateY(-50%);
	           	margin: 0 auto;
			}
			#d3{
				width:500px;
				height:400px;
				background:#269ABC;
			}
			#d31{
				clear: both;
				width:200px;
				height:100px;
				background:#E4B9B9;
	           	margin: 0 auto;
			}
			#d32{
				float:left;height:50%;
				margin-bottom:-50px;
			}
			#d4{
				width:500px;
				height:400px;
				position: relative;
				background:#269ABC;
			}
			#d41{
				width:200px;
				height:100px;
				background:#E4B9B9;
				position: absolute; 
				top:50%;
				margin-top:-50px;
				/*left:50%;
				margin-left:-100px;*/
				left:0;
				right:0;
				margin-right:auto;margin-left: auto;
			}
			#d5{
				display: table;
				width:500px;
				height:400px;
				background:#269ABC;
				display:flex;flex-direction:row;justify-content:center;align-items:center;
			}
			#d51{
				width:200px;
				height:100px;
				background:#E4B9B9;
				/*display:table-cell;vertical-align:middle;*/
				/*flex:1*/
			}
		</style>
	</head>
	<body>
		<h2>方法1</h2>
		<div id="d1">
			<div id="d11">
			</div>
		</div>
		<h2>方法2</h2>
		<div id="d2">
			<div id="d21">
			</div>
		</div>
		<h2>方法3 利用浮动元素</h2>
		<div id="d3">
			<div id="d32">
			</div>
			<div id="d31">
			</div>
		</div>
		<h2>方法4</h2>
		<div id="d4">
			<div id="d41">
			</div>
		</div>
		<h2>方法5 一个父元素div，一个未知宽度、高度的子元素div</h2>
		<div id="d5">
			<div id="d51">
			</div>
		</div>
	</body>
</html>
